<template>
  <page-container>
    <a-card :bordered="false">
      <a-form>
        <a-row>
          <a-col :span="6">
            <a-form-item label="姓名" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
              <a-input placeholder="请输入姓名" v-model="requestParams.name"></a-input>
            </a-form-item>
          </a-col>
		  <a-col :span="7">
		    <a-form-item label="电话" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
		      <a-input placeholder="请输入电话" v-model="requestParams.phone" @input="getUser"></a-input>
		    </a-form-item>
		  </a-col>
        </a-row>
		<!-- <a-row>
			<a-col :span="5">
				<a-form-item label="是否会员" :labelCol="{ span: 8 }" :wrapperCol="{ span: 8 }">{{isVip?'是':'否'}}</a-form-item>
			</a-col>
			<a-col :span="5">
				<a-form-item label="账户余额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 8 }">{{balance?balance:'0.00'}}</a-form-item>
			</a-col>
		</a-row> -->
        <a-row>
          <!-- <a-col :span="3" :offset="1">
            <a-form-item label="" :wrapperCol="{span:20}">
              <a-input placeholder="请输入验证码" v-model="requestParams.code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item>
              <a-button class="primary-border-btn" @click="clothesOfflineCode">获取验证码</a-button>
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-form>
      <a-divider />
      <clothesListForm ref="clothesListForm"/>
      <div class="btn-container">
        <a-button @click="goClothesOfflinePay" type="primary">去支付</a-button>
      </div>
      <div class="btn-container1">
        <a-button @click="goClothesOfflinePay" type="primary">去支付</a-button>
      </div>
    </a-card>
  </page-container>
</template>

<script>
import {clothesOfflineCode, clothesUserName, delClothesTag} from '@/api/clothes'
import clothesListForm from './modules/clothesListForm'
export default {
  components: {
    clothesListForm
  },
  data () {
    return {
      requestParams: {
        name: '',
        code: '',
        phone: ''
      },
	  isVip:"",
	  balance:'',
    }
  },
  methods: {
    getUser(e){
      console.log(this.requestParams.phone.length)
      if (this.requestParams.phone.length===11) {
        let params = { keyword: this.requestParams.phone };
        clothesUserName(params).then((res) => {
          this.requestParams.name = this.requestParams.name ? this.requestParams.name : res.data[0].name;
          //console.log(res.data)
		  this.isVip = res.data[0].is_vip;
		  this.balance = res.data[0].balance;
        })
      }
    },
    clothesOfflineCode () {
      const phone = this.requestParams.phone
      clothesOfflineCode({ mobile: phone }).then(res => {
        this.$message.success('操作成功,请注意查收!')
      })
    },
    checkData () {
      let checkStatus = true
      const clothesIdList = this.$refs.clothesListForm.clothesIdList
      const { name, phone } = this.requestParams
      if (!clothesIdList.length) {
        this.$message.warning('请先选择衣物')
        checkStatus = false
      }
      if (!name) {
        this.$message.warning('请填写下单人名称')
        checkStatus = false
      }
      if (!phone) {
        this.$message.warning('请填写下单人手机号')
        checkStatus = false
      }
      return checkStatus
    },
    goClothesOfflinePay () {
      if (!this.checkData()) return
      this.$router.push({
        name: 'clothesOfflinePay',
        query: {
          clothes: JSON.stringify(this.$refs.clothesListForm.clothesIdList),
          take_name: this.requestParams.name,
          take_mobile: this.requestParams.phone
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

.btn-container{
  display: flex;
  width:100%;
  position: fixed;
  top: 25%;
  left: 93%;
  z-index: 1000;
}
.btn-container1{
  display: flex;
  width:100%;
  margin-top: 50px;
}
.ant-row .ant-form-item{
	margin-bottom:12px;
}
</style>
